<template>
  <div class="login" ref="div" :style="{height:setWindowHeight + 'px'}">
    <top-nav :curpages="5"></top-nav>

    <div class="com-middle">
      <!--<img src="../../assets/product/pro-bg.jpg" alt="" class="comm-bg">-->
      <div class="comm-content">
        <h3>我的账户</h3>

        <div class="cc-img clear">
          <div class="cci-each">
            <router-link class="view-detail" to="/myinvest"><img src="../../assets/modifyPw/accout-1.jpg" alt="">
            </router-link>
            <p>
              我的投资
            </p>
          </div>
          <div class="cci-each">
            <!--<router-link class="view-detail" to="/investDetail/1/baseInfo"><img src="../../assets/modifyPw/accout-2.jpg" alt="">-->
            <!--</router-link>-->
            <a class="view-detail" @click="getFirstLink"><img src="../../assets/modifyPw/accout-2.jpg" alt=""></a>
            <p>
              我的网约车
            </p>
          </div>
          <div class="cci-each">
            <router-link class="view-detail" to="/modify"><img src="../../assets/modifyPw/accout-3.jpg" alt="">
            </router-link>
            <p>
              修改密码
            </p>
          </div>
          <div class="out-login" @click="loginout"><img src="../../assets/outlogin.png" alt=""></div>

        </div>
      </div>

    </div>

    <bottom></bottom>
  </div>

</template>

<script>
  import topNav from '../topNav/topnav'
  import bottom from '../bottom/bottom'
  import 'vue-awesome/icons'
  import Icon from 'vue-awesome/components/Icon'
  import {mapActions} from 'vuex'
  import api from '@/utils/api'
  import swal from 'sweetalert2'

  export default {
    name: "modifyPw",
    components: {
      Icon,
      topNav,
      bottom
    },
    data() {
      return {
        center: {lng: 0, lat: 0},
        zoom: 3,
        isbool: false,
        introduceH: 0
      }
    },
    computed: {
      setWindowHeight() {
        let h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
        return h
      },

    },
    methods: {
      getElement() {

        let h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

      },
      getFirstLink() {
        this.$store.dispatch('Get', {
          url: api.custInvestList,
          data: {
            customer: localStorage.getItem("userinfo"),
            type: 0,
            page: 0,
            size: 100
          }
        }).then((res) => {
          if (res.data.content.length < 1) {
            swal({
              title: "暂无网约车信息!!!",
              timer: 2000,
              showConfirmButton: false
            });
          } else {
            location.href = "/investDetail/" + res.data.content[0].id + "/baseInfo"
          }
        })
      },
      loginout() {
        this.$store.dispatch('Get', {
          url: api.loginout
        }).then((res) => {
          console.log(res)
          swal({
            title: "您已经登出！！！",
            timer: 2000,
            showConfirmButton: false
          }).then(() => {
            this.$router.push({name: 'login'})
          });
        })
      }
    },
    mounted() {

      setTimeout(() => {
        let wh = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
        let toph = this.$refs.topimg.offsetHeight,
          bannerh = this.$refs.bannerimg.offsetHeight,
          bottomh = this.$refs.bottomh.offsetHeight;

        this.introduceH = (wh - toph - bannerh - bottomh)
      }, 0)

    }
  }
</script>
<style scoped lang="scss">
  .login {
    width: 100%;
    min-width: 1210px;
    height: 100%;
    background-color: #313131;
  }

  .login-top img {
    width: 100%;
    min-width: 1210px;
    height: auto;
    display: block;
  }

  .login-banner {
    position: relative;

  }

  .login-banner img {
    width: 100%;
    min-width: 1210px;
    height: auto;
    display: block;
  }

  .login-bottom {
    width: 100%;
    background-color: #b9963f;
    overflow: hidden;
    position: fixed;
    bottom: 0;
    left: 0;
    p {
      color: #ffffff;
      font-size: 16px;
      text-align: center;
      width: 100%;
      margin: 10px 0;
    }
  }

  .introduce {
    width: 100%;
    min-width: 1210px;

    .inner {
      width: 1200px;
      margin: 0 auto;
      overflow: hidden;
      .middle-line {
        width: 2px;
        height: 158px;
        background-color: #5e5e5e;
        float: left;
        margin-top: 50px;
      }
      .ii-left {
        width: 630px;
        float: left;
        .iil-each {
          display: inline-block;
          margin: 50px 45px 0;
          vertical-align: top;

          h3 {
            width: 100%;
            text-align: center;
            font-size: 20px;
            color: #ffffff;
            margin-bottom: 20px;
          }
          a {
            width: 100%;
            text-align: center;
            font-size: 14px;
            color: #7b7b7b;
            display: block;
            margin: 10px 0;

          }
        }
      }
      .ii-right {
        width: 568px;
        float: left;
        .iir-code {
          margin: 60px 0 0 78px;
          width: 90px;
          float: left;
          p {
            font-size: 12px;
            color: #7b7b7b;
            margin-top: 8px;
          }

        }
        .concat-us {
          float: left;
          margin-left: 55px;
          margin-top: 60px;
          h2 {
            color: #ffffff;
            text-align: left;
            margin-bottom: 20px;
          }
          p {
            color: #7b7b7b;
            text-align: left;
            vertical-align: middle;
            /*line-height: 34px;*/
            margin-top: 8px;
            .wordicon {
              vertical-align: middle;
              margin-right: 15px;
            }
          }
        }
      }
    }
  }

  .to-login {
    width: 378px;
    height: 305px;
    background-color: #ffffff;
    position: absolute;
    top: 50%;
    right: 10%;
    margin-top: -152px;
    h2 {
      font-size: 20px;
      color: #5f5e5e;
      margin: 30px 0 20px;
    }
    .form-list {
      width: 295px;
      height: 40px;
      border: 1px solid #818081;
      border-radius: 4px;
      margin: 15px auto 0;
      input {
        width: 250px;
        height: 38px;
        border: none;
        vertical-align: top;
        text-indent: 10px;
        font-size: 14px;
      }
      icon {
        margin-left: 10px;
      }
    }
    .forget-passwd {
      text-indent: 250px;
      color: #5f5e5e;
      font-size: 12px;
      margin-top: 20px;
    }
    .login-now {
      width: 250px;
      height: 40px;
      margin: 20px auto 0;
      border-radius: 6px;
      button {
        width: 250px;
        height: 40px;
        background-color: #c12b2b;
        color: #ffffff;
        font-size: 18px;
        border-radius: 6px;
        cursor: pointer;
      }
    }
  }

  .com-middle {
    width: 100%;
    min-width: 1210px;
    background: url(../../assets/product/pro-bg.jpg) center no-repeat;
    background-size: cover;
    position: relative;
    .comm-content {
      width: 1200px;
      margin: 0 auto;
      overflow: hidden;

      h3 {
        width: 100%;
        height: 65px;
        background: url(../../assets/product/line.png) center no-repeat;
        background-size: 1200px 4px;
        text-align: center;
        color: #ffffff;
        font-size: 42px;
        line-height: 65px;
        margin-top: 110px;
      }

      .cc-img {
        width: 996px;
        margin: 40px auto;
        .cci-each {
          width: 260px;
          float: left;
          margin: 0 35px;
          img {
            display: block;
            float: left;
          }
        }

        p {
          width: 100%;
          margin-top: 20px;
          text-align: center;
          color: #ffffff;
          font-size: 22px;
          float: left;
        }
        .out-login {
          width: 100%;
          text-align: right;
          color: #ffffff;
          padding-right: 50px;
          margin-top: 50px;
          float: left;
          cursor: pointer;

        }
      }

    }
  }

  @media (max-width: 1400px) {
    .com-middle {
      width: 100%;
      min-width: 1210px;
      background: url(../../assets/product/pro-bg.jpg) center no-repeat;
      background-size: cover;
      position: relative;
      .comm-content {
        width: 1200px;
        margin: 0 auto;
        overflow: hidden;

        h3 {
          width: 100%;
          height: 65px;
          background: url(../../assets/product/line.png) center no-repeat;
          background-size: 1200px 4px;
          text-align: center;
          color: #ffffff;
          font-size: 36px;
          line-height: 65px;
          margin-top: 110px;
        }

        .cc-img {
          width: 860px;
          margin: 40px auto;
          .cci-each {
            width: 200px;
            float: left;
            margin: 0 35px;
            img {
              width: 200px;
              display: block;
              float: left;
            }
          }

          p {
            width: 100%;
            margin-top: 20px;
            text-align: center;
            color: #ffffff;
            font-size: 18px;
            float: left;
          }
          .out-login {
            width: 100%;
            text-align: right;
            color: #ffffff;
            padding-right: 50px;
            margin-top: 50px;
            float: left;
            cursor: pointer;
          }
        }

      }
    }
  }
</style>
